<template>
	<view class="content">
		<view class="topimg">
			<image class="topimg-img1" src="https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/bgimg1.png"
				mode=""></image>
			<image class="topimg-img2" src="https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/bgimg2.png"
				mode=""></image>
		</view>
		<u-navbar :autoBack="true" :placeholder="true" bgColor="rgba(0,0,0,0)" leftIconColor="#fff">
			<view class="u-nav-slot" slot="center" style="color: #fff;">
				客服中心
			</view>
		</u-navbar>
		<view class="toptitle">
			扫描添加 入群畅聊
		</view>
		<view class="codeblock">
			<view class="code">
				<image class="codeimg" src="https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_aixzy.jpg" mode=""
					show-menu-by-longpress='true'></image>
			</view>
		</view>
		<view class="save" @tap="saveImg('https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_aixz.png')">
			保存到相册
		</view>
		<view class="bottomtitle">
			长按识别二维码
		</view>
		<view class="bottomtitle bottomtitle2">
			添加客服微信
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						//调用方法成功
						console.log('success');
					}
				});
			},
			saveImg(url) {
				var that = this;
				uni.showLoading({
					title: '正在保存图片...'
				});
				//获取用户的当前设置。获取相册权限
				uni.getSetting({
					success: (res) => {
						//如果没有相册权限
						if (!res.authSetting["scope.writePhotosAlbum"]) {
							//向用户发起授权请求
							uni.authorize({
								scope: "scope.writePhotosAlbum",
								success: () => {
									//授权成功保存图片到系统相册
									uni.saveImageToPhotosAlbum({
										//图片路径，不支持网络图片路径
										filePath: url,
										success: (res) => {
											uni.hideLoading();
											return uni.showToast({
												title: "保存成功！",
											});
										},
										fail: (res) => {
											console.log(res.errMsg);
											return uni.showToast({
												title: res.errMsg,
											});
										},
										complete: (res) => {
											uni.hideLoading();
										},
									});
								},
								//授权失败
								fail: () => {
									uni.hideLoading();
									uni.showModal({
										title: "您已拒绝获取相册权限",
										content: "是否进入权限管理，调整授权？",
										success: (res) => {
											if (res.confirm) {
												//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
												uni.openSetting({
													success: (res) => {
														console.log(res
															.authSetting
														);
													},
												});
											} else if (res.cancel) {
												return uni.showToast({
													title: "已取消！",
												});
											}
										},
									});
								},
							});
						} else {
							uni.getImageInfo({
								src: url,
								success(res) {
									console.log(res.path, '图片被导出');
									that.downLoadPicture(res.path);
								}
							})
						}
					},
					fail: (res) => {},
				});
			},
			downLoadPicture(url) {
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success(res) {
						uni.showToast({
							title: '已导出,保存至相册',
							icon: 'success'
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background-image: url('https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/bgimg.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.topimg {
		position: absolute;
		width: 100%;

		.topimg-img1 {
			position: absolute;
			width: 252rpx;
			height: 252rpx;
			top: 122rpx;
			left: 52rpx;
		}

		.topimg-img2 {
			position: absolute;
			width: 82rpx;
			height: 82rpx;
			top: 136rpx;
			right: 64rpx;
		}
	}

	.toptitle {
		font-size: 39rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 109rpx;
		margin-bottom: 126rpx;
	}

	.codeblock {
		width: 471rpx;
		height: 471rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;

		.code {
			width: 452rpx;
			height: 452rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.codeimg {
				width: 374rpx;
				height: 375rpx;
			}
		}
	}

	.save {
		width: 326rpx;
		height: 72rpx;
		background: #95BCFF;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 56rpx;
		margin-bottom: 130rpx;
	}

	.bottomtitle {
		display: flex;
		justify-content: center;
		font-size: 39rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bottomtitle2 {
		margin-top: 25rpx;
	}
</style>